<template>
  <div class="form-control w-full" :class="{'dark-mode': isDarkMode}">
    <label v-if="label" class="label">
      <span class="label-text">
        {{ label }}
        <span v-if="required" class="text-error ml-1">*</span>
      </span>
    </label>
    <textarea
      :value="modelValue"
      @input="handleInput"
      class="textarea textarea-bordered w-full"
      :class="{
        'textarea-error': error || (required && showRequiredError) || isExceedingMaxLength,
        'textarea-disabled': disabled
      }"
      :placeholder="placeholder"
      :disabled="disabled"
      :rows="rows"
      :maxlength="maxLength > 0 ? maxLength : undefined"
      @blur="handleBlur"
    ></textarea>
    <div class="flex justify-between items-center mt-1">
      <label v-if="error || (required && showRequiredError) || isExceedingMaxLength" class="label py-1">
        <span class="label-text-alt text-error">
          {{
            error ||
            (isExceedingMaxLength ? `超出最大字符限制: ${maxLength}` : '此项为必填项')
          }}
        </span>
      </label>
      <div v-if="maxLength > 0" class="text-xs text-gray-500 ml-auto">
        {{ currentLength }}/{{ maxLength }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';

interface Props {
  modelValue: string;
  label?: string;
  placeholder?: string;
  error?: string;
  disabled?: boolean;
  rows?: number;
  maxLength?: number;
  required?: boolean;
  isDarkMode?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '',
  disabled: false,
  rows: 4,
  maxLength: 0, // 0表示不限制长度
  required: false,
  isDarkMode: true
});
const isDarkMode = ref(true);
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

const showRequiredError = ref(false);
const currentLength = computed(() => props.modelValue?.length || 0);
const isExceedingMaxLength = computed(() =>
  props.maxLength > 0 && currentLength.value > props.maxLength
);
const textarea = ref<any>();
const handleInput = (event: Event) => {
  const target = event.target as HTMLTextAreaElement;
  const value = target.value;
  textarea.value = value;
  // 如果设置了maxLength且不依赖HTML的maxlength属性，在这里手动截断
  if (props.maxLength > 0 && value.length > props.maxLength) {
    // 只发射符合长度限制的值（截断过长的输入）
    emit('update:modelValue', value.slice(0, props.maxLength));
  } else {
    emit('update:modelValue', value);
  }

  // 如果用户输入了内容，隐藏必填错误提示
  if (value.trim() !== '') {
    showRequiredError.value = false;
  }
};

const handleBlur = (event: Event) => {
  const target = event.target as HTMLTextAreaElement;

  // 当失去焦点且为必填项但未填写内容时，显示必填错误提示
  if (props.required && target.value.trim() === '') {
    showRequiredError.value = true;
  } else {
    showRequiredError.value = false;
  }
};
defineExpose({
  textarea
});
watch(() => props.isDarkMode, (newValue) => {
  isDarkMode.value = newValue;
}, { immediate: true, deep: true });
</script>
<style scoped>
/* 深色模式适配 */
.dark-mode {
  background: transparent !important;
}
.dark-mode .textarea {
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

.dark-mode .textarea:focus {
  border-color: #1e40af !important;
  box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.1) !important;
}

.dark-mode .textarea:hover {
  border-color: #9ca3af !important;
}

.dark-mode .textarea:disabled {
  background-color: #f3f4f6 !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}

.dark-mode .textarea::placeholder {
  color: #9ca3af !important;
}

.dark-mode .label-text {
  color: var(--color-text-primary) !important;
}

.dark-mode .label-text-alt {
  color: var(--error-color) !important;
}

.dark-mode .text-gray-500 {
  color: var(--text-color) !important;
}

@media (max-width: 1024px) {
  .textarea {
    font-size: 12px !important;
    padding: 4px 8px !important;
    min-height: 80px !important;
  }

  .label-text {
    font-size: 12px !important;
  }

  .dark-mode .label-text {
    color: var(--text-color);
  }

  .label-text-alt {
    font-size: 11px !important;
  }

  .text-xs {
    font-size: 10px !important;
  }

  .label {
    padding: 0.25rem 0 !important;
  }

  .mt-1 {
    margin-top: 0.25rem !important;
  }

  .py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
}
</style>

